<template>
  <div style="padding:30px;">
    <el-table
      :data="tableData"
      border
      style="width: 100%;margin: 0 0 20px;">
      <el-table-column
        prop="shortName"
        label="公司简称"
        width="160">
      </el-table-column>
      <el-table-column
        prop="shopName"
        label="公司名称"
        width="280">
      </el-table-column>
      <el-table-column
        prop="pcdDesc"
        label="所在城市"
        width="160">
      </el-table-column>
      <el-table-column
        prop="linkMan"
        label="联系人">
      </el-table-column>
      <el-table-column
        prop="linkTel"
        label="联系电话">
      </el-table-column>
    </el-table>
    <span class="total">总共：{{total}}条</span>
    <el-pagination
      style="display: inline-block;vertical-align: middle"
      background
      @current-change="handleCurrentChange"
      layout=" prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import { getList } from '@/api/company'
  export default{
    data(){
      return{
        tableData:[],
        total:0,
        page:1,
        rows:10,
      }
    },
    created(){

      getList({page:this.page,rows:this.rows}).then(res => {
        this.tableData=res.rows;
      this.total=res.total;
    }).catch(error => {
        console.log(res,111)
      })
    },
    methods:{
      handleCurrentChange(val){
        getList({page:val,rows:this.rows}).then(res => {
          this.tableData=res.rows;
        this.total=res.total;
      }).catch(error => {
          console.log(res,111)
      })
      }
    }
  }
</script>
<style scoped>
  .total{
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    color: #666;
  }
</style>
